﻿<template>
  <section style="padding: 0 20px">
    <!-- <p>起点<span class="fontSty">（运单发货地址）</span></p> -->
    <!-- <i class="iconfont icon-qidian_jiedian" /> -->
    <div class="tabTitleSty">
      <icon-svg icon-name="qidian_jiedian"
                class-name="iconSty" />
      <span class="fontSty">(运单发货地址)</span>
    </div>
    <div class="driverSty" />
    <div class="tabTitleSty">
      <icon-svg icon-name="tianjiazhandian"
                class-name="iconSty-2 pointer"
                @click="handleAdd(0)" />
      <el-button type="text"
                 class="fontSty"
                 @click="handleAdd(0)">添加站点</el-button>
    </div>
    <div class="driverSty" />
    <template v-for="(item, index) in listData">
      <div :key="index">
        <div class="tabTitleSty">
          <icon-svg icon-name="zhandian"
                    class-name="iconSty" />
          <span class="fontSty-1">途径站</span>
          <div class="stationInfoSty">
            <span class="mlr30">承运方: {{ item.carrierName }}</span>
            <span class="mlr30">站点: {{ item.stationName }}</span>
            <span class="mlr30">收货时间: {{ item.toTime }}</span>
            <!-- <span class="mlr30">地址: {{ `${item.stationAreaName}${item.stationAddres}` }}</span> -->
            <span class="mlr30">地址: {{ `${item.stationAreaName}` }}</span>
            <span class="mlr30">联系人: {{ item.contact.contactName }}</span>
            <span class="mlr30">联系电话: {{ item.contact.contactMobile }}</span>
          </div>
          <icon-svg icon-name="shanchu1"
                    class-name="iconSty-1 pointer"
                    @click="handleDelete(index)" />
        </div>
        <div class="driverSty" />
        <div class="tabTitleSty">
          <icon-svg icon-name="tianjiazhandian"
                    class-name="iconSty-2 pointer"
                    @click="handleAdd(index + 1)" />
          <el-button type="text"
                     class="fontSty"
                     @click="handleAdd(index + 1)">添加站点</el-button>
        </div>
        <div class="driverSty" />
      </div>
    </template>
    <div class="tabTitleSty">
      <icon-svg icon-name="zhongdian_jiedian"
                class-name="iconSty" />
      <span class="fontSty">(运单收货地址)</span>
    </div>
    <!-- <p>终点<span class="fontSty">（运单收货地址）</span></p> -->
    <station-drawer v-if="drawer"
                    :drawer.sync="drawer"
                    :carrier-options="carrierOptions"
                    :to-time.sync="toTime"
                    :from-time.sync="fromTime"
                    :selectable-range.sync="selectableRange"
                    v-bind="$attrs"
                    @changeListData="changeListData" />
  </section>
</template>

<script>
import StationDrawer from "./StationDrawer.vue";
import { returnHourMinute } from "@/libs/util.js";
export default {
  name: "SplitProcess",
  components: { StationDrawer },
  props: {
    carrierOptions: {
      type: Array,
      default: () => []
    },
    initialTime: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      listData: [],
      drawer: false,
      fromTime: null,
      toTime: null,
      selectableRange: `00:00:00 - 23:59:59`,
      timeInitial: {}
    };
  },
  watch: {
    initialTime: {
      handler (val) {
        if (val) {
          this.fromTime = val.fromTime;
          this.toTime = val.toTime;
          this.selectableRange = val.selectableRange;
          this.timeInitial = val;
        }
      },
      deep: true
    }
  },
  methods: {
    // 新增途径站
    handleAdd (index) {
      if (this.listData.length > 8)
        return this.$message.error("最多可拆分10段");
      if (index === 0) {
        if (this.listData.length != 0) {
          this.fromTime = this.initialTime.fromTime;
          this.toTime = this.listData[index].toTime;
          let fTime = returnHourMinute(
            this.fromTime.substring(10, 13),
            this.fromTime.substring(14, 16),
            true
          );
          let tTime = returnHourMinute(
            this.toTime.substring(10, 13),
            this.toTime.substring(14, 16),
            false
          );
          this.selectableRange = `${fTime}:00 - ${tTime}:00`;
        }
        // 收货时间是否大于发货时间1分钟
        let criticalTime = Math.abs(new Date(this.initialTime.toTime).getTime() - new Date(this.initialTime.fromTime).getTime()) <= (1 * 60 * 1000);
        if (criticalTime) {
          return this.$message.error(
            "请重新调整运单收发货时间后再重试。"
          );
        }
      } else {
        this.fromTime = this.listData[index - 1].toTime;
        if (index === this.listData.length)
          this.toTime = this.initialTime.toTime;
        if (index < this.listData.length)
          this.toTime = this.listData[index].toTime;
      }
      if (this.listData.length > 0) {
        if (index === 0) {
          let lastDay = this.listData[0].toTime;
          let lastTime = returnHourMinute(
            lastDay.substring(10, 13),
            lastDay.substring(14, 16),
            false
          );
          let lastDate = `${lastDay.substring(0, 10)} ${lastTime}`;
          if (lastDate == this.initialTime.fromTime) {
            return this.$message.error(
              "下一个途经站要求到货时间已接近原单发货时间，不能再拆分；如需继续拆分，请先调整下一个途经站要求到货时间。"
            );
          }
        }
        if (index === this.listData.length) {
          let nextDay = this.listData[this.listData.length - 1].toTime;
          let nextTime = returnHourMinute(
            nextDay.substring(10, 13),
            nextDay.substring(14, 16),
            true
          );
          let date = `${nextDay.substring(0, 10)} ${nextTime}`;
          if (date == this.initialTime.toTime) {
            return this.$message.error(
              "上一个途经站要求到货时间已接近原单发货时间，不能再拆分；如需继续拆分，请先调整途经站要求到货时间。"
            );
          }
        }
        if (
          this.listData.length > 1 &&
          index != 0 &&
          index != this.listData.length
        ) {
          let prevDate = this.listData[index - 1].toTime;
          let hour = returnHourMinute(
            prevDate.substring(10, 13),
            prevDate.substring(14, 16),
            true
          );
          let days = `${prevDate.substring(0, 10)} ${hour}`;
          if (days == this.listData[index].toTime) {
            return this.$message.error(
              "下一个途经站要求到货时间已接近上一个运单的要求到货时间，不能再拆分；如需继续拆分，请先调整途经站要求到货时间。"
            );
          }
        }
      }
      let fTime = returnHourMinute(
        this.fromTime.substring(10, 13),
        this.fromTime.substring(14, 16),
        true
      );
      let tTime = returnHourMinute(
        this.toTime.substring(10, 13),
        this.toTime.substring(14, 16),
        false
      );
      this.selectableRange = `${fTime}:00 - ${tTime}:00`;
      this.activeIndex = index;
      this.drawer = true;
    },
    // 删除途径站
    handleDelete (index) {
      if (index === 0) {
        this.fromTime = this.initialTime.fromTime;
        this.toTime = this.initialTime.toTime;
      } else {
        this.fromTime = this.listData[index - 1]?.toTime;
        this.toTime = this.listData[index + 1]?.fromTime;
      }
      this.listData.splice(index, 1);
    },
    // 拆单数据源改变
    changeListData (item) {
      this.listData.splice(this.activeIndex, 0, item);
      this.fromTime = item.toTime;
      this.$emit("changeProcessList", this.listData);
    }
  }
};
</script>

<style lang="scss" scoped>
.fontSty {
  margin-left: 8px;
  font-size: 14px;
  color: darkgrey;
}
.fontSty-1 {
  margin-left: 8px;
  font-size: 14px;
  width: 52px;
}
.stationInfoSty {
  background: rgba(250, 250, 250, 0.39);
  opacity: 1;
  border-radius: 3px;
  // min-width: 1020px;
  height: auto;
  padding: 5px 0;
  margin: 0 20px;
}
.iconSty {
  width: 26px;
  height: 26px;
}
.iconSty-1 {
  width: 17.76px;
  height: 17.76px;
}
.iconSty-2 {
  width: 22px;
  height: 22px;
  margin-left: 1px;
}
.tabTitleSty {
  display: flex;
  align-items: center;
}
.driverSty {
  height: 30px;
  border-left: 1px dashed var(--prev-color-primary);
  margin-left: 12px;
}
.middle {
  margin: 20px 10px;
}
.pad-5 {
  padding: 5px !important;
}
.mlr30 {
  margin-left: 30px;
  margin-right: 30px;
}
</style>
